<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <div class="login_main">
            <NewCard>
              <GetCode
                :redirect="redirect"
                :isagreement.sync="isagreement"
                :erOrInput.sync="erOrInput"
              ></GetCode>
              <!-- 是ios和安卓就隐藏 -->
              <div
                class="dowApp"
                v-if="!['android', 'ios'].includes($isDevice)"
              >
                <el-divider>下载应用</el-divider>
                <ul>
                  <li>
                    <span>iPad</span>
                    <svg-icon icon-class="ipad_icon" />
                    <div class="boxErOrBtn">
                      <p>
                        <canvas id="canvas" ref="ipadCanvas"></canvas>
                        <!-- <svg-icon icon-class="windows_icon" /> -->
                      </p>
                    </div>
                  </li>
                  <!-- <li>
                    <span>IOS</span>
                    <svg-icon icon-class="ios_icon" />
                    <div class="boxErOrBtn">
                      <p>
                        <img src="~@/assets/images/er.png" alt="" />
                        <svg-icon icon-class="ios_icon" />
                      </p>
                    </div>
                  </li> -->
                  <li>
                    <span>安卓平板</span>
                    <svg-icon icon-class="android_icon" />
                    <div class="boxErOrBtn">
                      <p>
                        <canvas id="canvas" ref="androidPadCanvas"></canvas>
                        <!-- <svg-icon icon-class="android_icon" /> -->
                      </p>
                    </div>
                  </li>
                  <li>
                    <span>安卓/鸿蒙</span>
                    <svg-icon icon-class="harmony_icon" />
                    <div class="boxErOrBtn">
                      <p>
                        <canvas id="canvas" ref="androidCanvas"></canvas>
                        <!-- <svg-icon icon-class="harmony_icon" /> -->
                      </p>
                    </div>
                  </li>
                  <li>
                    <span>Mac</span>
                    <svg-icon icon-class="mac_icon" />
                    <div class="boxErOrBtn el-btn">
                      <p>
                        <a :href="macUrl">
                          <el-button round size="mini">下载客户端</el-button>
                        </a>
                      </p>
                    </div>
                  </li>
                  <li>
                    <span>Windows</span>
                    <svg-icon icon-class="windows_icon" />
                    <div class="boxErOrBtn el-btn">
                      <p>
                        <a :href="windowUrl">
                          <el-button round size="mini">下载客户端</el-button>
                        </a>
                      </p>
                    </div>
                  </li>
                </ul>
                <!-- <p class="contactKf">联系客服 ｜ 工作时间：9:30-18:30</p> -->
              </div>
            </NewCard>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="FeaturedContent" v-if="!isagreement">
            <FeaturedContent></FeaturedContent>
          </div>
          <div class="agreement" v-else>
            <Agreement></Agreement>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Agreement from "./agreement.vue";
import FeaturedContent from "@/components/FeaturedContent/index.vue";
import NewCard from "@/wss/components/newCard.vue";
import { getApplicationListApi } from "@/BMViews/api/login.js";
import { test } from "@/router/index.js";
import GetCode from "./getCode.vue";
export default {
  name: "Login",
  components: { NewCard, FeaturedContent, Agreement, GetCode },
  data() {
    return {
      // 受否是安卓和ios，如果是要隐藏下载
      isAndoidOrIos: true,
      erOrInput: 1, //当前是1验证码登录 2密码登录 3扫码登录

      // 默认还是显示用户协议
      isagreement: false,
      loginForm: {
        checked: false,
        username: "",
        password: "",
        rememberMe: false,
        // code: '',
        uuid: "",
      },
      redirect: undefined,

      windowUrl:'',//window下载链接
      macUrl:'',//mac下载链接
      iPadUrl:'',//iPad下载链接
      padUrl:'',// 安卓平板下载链接
      iosUrl:'',//ios下载链接
      androidUrl:'',//安卓下载链接
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        // console.log(route.query.redirect, "加起来");
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getApplicationList(1)// 获取window下载链接
    this.getApplicationList(2)// 获取mac下载链接
    this.getApplicationList(3)// 获取iPad下载链接
    this.getApplicationList(4)// 获取安卓平板下载链接
    this.getApplicationList(5)// 获取ios下载链接
    this.getApplicationList(6)// 获取安卓下载链接
  },
  methods: {
    test() {
      test();
    },

    // 登录
    handleLogin() {
      if (this.$store.getters.token || !this.loginForm.checked) {
        this.$message({
          type: "warning",
          message: this.loginForm.checked ? "已登录" : "请先勾选协议",
        });
        return;
      }
      //   this.$refs.loginForm.validate((valid) => {
      // if (valid) {

      //   if (this.loginForm.rememberMe) {
      //     Cookies.set("username", this.loginForm.username, { expires: 30 });
      //     Cookies.set("password", encrypt(this.loginForm.password), {
      //       expires: 30,
      //     });
      //     Cookies.set("rememberMe", this.loginForm.rememberMe, {
      //       expires: 30,
      //     });
      //   } else {
      //     Cookies.remove("username");
      //     Cookies.remove("password");
      //     Cookies.remove("rememberMe");
      //   }
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$router
            .push({ path: this.redirect || "/Bm-search/searchAnswer" })
            .catch(() => {});
        })
        .catch(() => {
          this.loading = false;
          if (this.captchaOnOff) {
            this.getCode();
          }
        });
      // }
      //   });
    },

    // 获取验证码
    async getCode() {
      // let res = await getOrderListApi(this.loginForm);
      // console.log(res, "搞定了算了");
    },

    // 切换登录的方式
    handlerLogin() {
      this.erOrInput = !this.erOrInput;
    },

    // 获取下载应用的信息 1Windows 2mac 3iPad webview 4安卓webview 5i0S 6安卓
    async getApplicationList(type){
      let result = await getApplicationListApi({type})
      if(result.code==200){
        // 获取.boxErOrBtn的元素
        let boxErOrBtn = document.querySelector('.boxErOrBtn>p')
        if(result.data){
          if(type == 1) this.windowUrl = result.data.url
          if(type == 2) this.macUrl = result.data.url
          if(type == 3){
            // ipad
            this.iPadUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.ipadCanvas,
              this.iPadUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1  },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          }
          if(type == 4){
            // 安卓平板
            this.padUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.androidPadCanvas,
              this.padUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1  },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          }
          if(type == 5) this.iosUrl = result.data.url
          if(type == 6) {
            // 安卓和鸿蒙
            this.androidUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.androidCanvas,
              this.androidUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1  },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          }
        }
      }
    },
  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .el-card__body {
  position: relative;
}
::v-deep .el-card__body > div {
  height: 100%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
::v-deep .login_main .top {
  display: none;
}
ul,
h3,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}

.login_main >>> .el-card__body {
  padding: 0;
}

/* 登录 */
.erOrInput {
  display: flex;
  justify-content: center;
  padding: 80px 0;
  position: relative;
}
.scan {
  text-align: center;
}
.phoneLogin {
  text-align: center;
}
.erOrInput .scan > svg,
.erOrInput .phoneLogin > svg {
  position: absolute;
  top: 20px;
  right: 0;
  font-size: 26px;
  cursor: pointer;
}

.erOrInput h3 {
  font-size: 30px;
  font-weight: bold;
}
.erOrInput p {
  font-size: 14px;
  color: #666;
  margin-top: 20px;
  margin-bottom: 50px;
}
.erOrInput img {
  width: 250px;
}
.phoneLogin p {
  margin-bottom: 30px;
}
.phoneLogin .el-input {
  width: 80%;
  margin-bottom: 20px;
}
::v-deep .phoneLogin .el-input input {
  border: 0;
  border-bottom: 1px solid #ebebeb;
  height: 50px;
  line-height: 50px;
}
::v-deep .phoneLogin .el-input .el-input__suffix {
  display: flex;
  align-items: center;
}
.phoneLogin .el-input .el-button {
  border: 0;
  padding: 16px 0px;
  color: #f87a23;
  background-color: transparent;
}
.phoneLogin .el-input .el-button:hover {
  background-color: transparent;
}
.phoneLogin > .el-button {
  display: block;
  margin: 0 auto;
  width: 80%;
  border-color: #f87a23;
  background-color: #f87a23;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
}

/* 协议 */
.phoneLogin .el-checkbox {
  margin-top: 30px;
}
::v-deep .phoneLogin .el-checkbox__label {
  color: #666;
}
::v-deep .phoneLogin .el-checkbox__label > span {
  color: #f87a23;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #f87a23;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f87a23;
  border-color: #f87a23;
}

/* 下载应用 */
.boxTitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}
.dowApp {
  margin: 0 30px;
  margin-top: 30px;
}
.dowApp ul {
  display: flex;
  justify-content: space-between;
}
.dowApp ul > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 18.5%;
  /* height: 160px; */
  margin: 30px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
  border: 1px solid #ecedf0;
  background-color: #fff;
  text-align: center;
  transition: all 0.3s;
  overflow: hidden;
}
.dowApp ul > li > span {
  height: 20%;
  text-align: center;
}
.dowApp ul > li > svg {
  display: block;
  font-size: 50px;
  height: 50%;
}

.dowApp ul > li .boxErOrBtn {
  position: absolute;
  top: 100%;
  display: flex;
  justify-content: center;
  transition: all 0.3s;
}
.dowApp ul > li > div {
  position: relative;
  width: 90%;
  margin: 0;
  /* height: 50%; */
}
.dowApp ul > li > div.el-btn p {
  border: 0;
}
.dowApp ul > li > div.el-btn p a{
  width: 100%;
}
.dowApp ul > li > div.el-btn .el-button {
  width: 100%;
  padding: 0 10px;
  margin-top: 30%;
  line-height: 30px;
  border: 0;
  font-size: 12px;
}
.dowApp ul > li > svg {
  transition: all 0.3s;
}
.dowApp ul > li p {
  position: relative;
  border: 2px solid #fff;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  display: flex;
}
.dowApp ul > li p > img {
  width: 100%;
  height: 100%;
  border: 2px solid #f1f3ff;
}
.dowApp ul > li p > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 3px;
}

.dowApp ul > li .el-btn .el-button:hover {
  color: #f87a23;
  background-color: #fff;
}
.dowApp ul > li:hover {
  background-color: #f1f3ff;
}
.dowApp ul > li:hover > svg {
  opacity: 0;
}
.dowApp ul > li:hover .boxErOrBtn {
  top: 30%;
}
@media (max-width: 1720px) {
  .dowApp ul > li:hover .boxErOrBtn {
    top: 40%;
  }
}

.dowApp .contactKf {
  text-align: center;
  color: #999;
  font-size: 12px;
}
/* 下载应用 end*/
@media (max-width: 1540px) {
  .dowApp ul > li {
    /* height: 140px; */
    margin: 10px auto;
    font-size: 12px;
  }
}
@media (max-width: 1180px) {
  .dowApp ul > li {
    /* height: 130px; */
    margin: 10px auto;
    font-size: 12px;
  }
  .dowApp ul > li > svg {
    font-size: 40px;
  }
}
@media (max-width: 1120px) {
}
</style>
